<template>
    <!-- 歌单详情 -->
    <div class="SongDetails" v-if="songItemFlag">
        <!-- 歌曲基本信息 -->
        <div class="detailsInfo">
            <div class="infoImg">
                <img :src="songItem.coverImgUrl" alt="">
            </div>
            <div class="infoMain">
                <div class="title">
                    <span>歌单</span>
                    <strong>{{songItem.name}}</strong>
                </div>
                <div class="userName">
                    <img :src="songItem.creator.avatarUrl" alt="">
                    <span class="nickname">{{songItem.creator.nickname}}</span>
                    <span class="createTime">{{$moment(songItem.createTime).format("YYYY-MM-DD")}}创建</span>
                </div>
                <div class="bth">
                    <p>
                        <i class="iconfont big-bofang"></i>
                        <span @click="playAll()">播放全部</span>
                        <i class="iconfont big-jia"></i>
                    </p>
                    <p>
                        <i class="iconfont big-shoucangjia"></i>
                        <span>收藏（{{Math.round(songItem.subscribedCount/10000)}}万）</span>
                    </p>
                    <p>
                        <i class="iconfont big-fenxiang"></i>
                        <span>分享（{{Math.round(songItem.shareCount/10000)}}万）</span>
                    </p>
                    <p>
                        <i class="iconfont big-anchuweidianiconquanji_fuzhi-"></i>
                        <span>下载全部</span>
                    </p>
                </div>
                <div class="tags">
                    <span>标签：</span>
                    <span>{{songItem.tags.join()}}</span>
                </div>
                <div class="playCount">
                    <span>歌曲：{{songItem.trackCount}}</span>
                    <span>播放：{{Math.round(songItem.playCount/10000)}}万</span>
                </div>
                <div class="description" :title="songItem.description">简介：{{songItem.description}}</div>
            </div>
        </div>
        <div class="nav">
            <span :class="navSpanFlag=='歌曲列表'? 'spanActive':''" @click="navSpanClick('歌曲列表')">歌曲列表</span>
            <span :class="navSpanFlag=='评论'? 'spanActive':''" @click="navSpanClick('评论')">评论</span>
            <span :class="navSpanFlag=='收藏者'? 'spanActive':''" @click="navSpanClick('收藏者')">收藏者</span>
        </div>
        <div class="songList">
            <SongList ref="SongList" :songListChild="songList" v-if="navSpanFlag=='歌曲列表'" />
        </div>
    </div>
</template>

<script>
import SongList from "./components/songList/SongList"
export default {
    data(){
        return{
            songItemFlag:false,
            navSpanFlag:"歌曲列表",
            songId:"",
            songItem:{},
            songList:[],
        }
    },
    components:{
        SongList
    },
    created(){
        // 获取歌曲ID
        this.songId = JSON.parse(localStorage.getItem('songItem')).id;
        this.getPlaylistDetail();
    },
    methods:{
        // 获取歌单详情数据
        getPlaylistDetail(){
            this.$axios.get('/playlist/detail?id='+this.songId).then(res=>{
                if(200==res.data.code){
                    let ids = [];
                    this.songItem = res.data.playlist;
                    res.data.playlist.trackIds.forEach(item => {
                        ids.push(item.id)
                    });
                    this.getSongListAll(ids.join())
                }
            })
        },
        // 歌单所有歌曲
        getSongListAll(ids){
            this.$axios('/song/detail?ids='+ids).then(res=>{
                if(200==res.data.code){
                    this.songList = res.data.songs;
                    this.songItemFlag = true;
                }
            })
        },
        // 播放全部
        playAll(){
            this.navSpanFlag = "歌曲列表"
            this.$refs.SongList.liDblclick(this.songList[0]);
        },
        navSpanClick(name){
            this.navSpanFlag = name;
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./SongDetails.scss";
</style>